<template>
  <div>
    <el-drawer
      title="统计详情"
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
      :before-close="handleClose"
      class="drawerBox"
    >
      <el-row :gutter="20" class="rowBox">
        <el-col :span="8">统计角色：{{ listData.roleName }}</el-col>
        <el-col :span="8">姓名：{{ listData.fullName }}</el-col>
      </el-row>
      <el-row :gutter="20" class="rowBox">
        <el-col :span="8">统计数据：{{ listData.statisticsName }}</el-col>
        <el-col :span="8">数值：{{ listData.count }}</el-col>
      </el-row>
      <div class="rowBox">详情</div>
      <el-table :data="tableData" border stripe style="width: 600px">
        <el-table-column prop="number" label="事项编号" align="center"> </el-table-column>
        <el-table-column prop="typeName" label="问题类型" align="center"> </el-table-column>
        <el-table-column label="事项状态" align="center">
          <template slot-scope="scope">{{ getStatus(scope.row.status) }}</template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageBox"
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :total="pageTotal"
        @current-change="getList"
        @prev-click="getList"
        @next-click="getList"
      ></el-pagination>
    </el-drawer>
  </div>
</template>

<script>
import * as api from '@/api/project'
export default {
  props: {
    listData: {
      default: () => {
        return {}
      },
      type: Object,
    },
  },
  data() {
    return {
      drawer: false,
      tableData: [],
      // 分页
      currentPage: 1,
      pageTotal: 0,
    }
  },
  watch: {
    drawer(e) {
      if (e) {
        this.getList(1)
      }
    },
  },
  methods: {
    // 获取列表
    getList(e) {
      this.currentPage = e
      let data = {
        current: e,
        limit: 10,
        id: this.listData.userId,
      }
      api.dataInfoList(data).then(res => {
        if (res.code == '200') {
          this.tableData = res.data.dataInfoList
          this.pageTotal = res.data.total
        }
      })
    },
    handleClose() {
      this.drawer = false
    },
    // 获取状态
    getStatus(id) {
      let status = ''
      // 0(已事件)1(待核实)2(已核实)3(退回待核实)4(已办结)5(已作废)
      switch (id) {
        case 0:
          status = '已上报'
          break
        case 1:
          status = '待核实'
          break
        case 2:
          status = '已核实'
          break
        case 3:
          status = '退回待核实'
          break
        case 4:
          status = '已办结'
          break
        case 5:
          status = '已作废'
          break
        case 6:
          status = '已上报'
          break
        case 7:
          status = '已上报'
          break
        case 8:
          status = '已上报'
          break
        case 9:
          status = '已上报'
          break
        case 10:
          status = '退回待核实'
          break
      }
      return status
    },
  },
}
</script>

<style lang="scss" scoped>
.drawerBox {
  ::v-deep .el-drawer__body {
    padding: 20px;
  }
  .rowBox {
    margin-bottom: 20px;
  }
}
.pageBox {
  width: 600px;
  margin-top: 10px;
  text-align: center;
}
</style>
